<template>
  <div id="me">
    <!--头像-->
    <div class="portrait">
      <img  src="../../assets/portrait.png" class="head">
      <div class="user-info">
        <p><span class="fl">阿里巴</span><span class="fr">编辑</span></p>
        <p>阿里巴</p>
      </div>
    </div>
    <div class="kong"></div>

    <div class="nav">
      <div class="nav-li">成就</div>
      <div class="nav-li">动态</div>
      <div class="nav-li">收藏</div>
    </div>
    <div class="kong"></div>
    <mt-cell title="标题" label="描述信息" is-link></mt-cell>
    <mt-cell title="标题" label="描述信息" is-link></mt-cell>
    <mt-cell title="标题" label="描述信息" is-link></mt-cell>
    <mt-cell title="标题" label="描述信息" is-link></mt-cell>
  </div>
</template>

<script>

export default {
  name: 'me',
  data () {
    return {
      msg: 'me'
    }
  },
  methods: {
  },
  components: {
  }
}
</script>

<style lang="less">
#me{
  .portrait{
    width: 100%;
    height: 44px;
    padding: 15px;
    background: #fff;
    .head{
      width: 44px;
      height: 44px;
      float: left;
      border-radius: 15px;
    }
    .user-info{
      min-width: calc(~"100% - 64px");
      height: 44px;
      display: block;
      float: left;
      padding-left: 20px;
      line-height: 22px;
      p{width: 100%;height: 22px;display: block}
      span{
        display: block;line-height: 22px;
      }
    }
  }
  .nav{
    background: #ffffff;
    display:inline-block;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    /*display:box;*/
    box-orient:horizontal;
  }

  .nav-li{
    text-align: center;
    height: 40px;
    line-height: 40px;
    -webkit-box-flex: 1.0;
    -moz-box-flex:1.0;
    box-flex:1.0;
  }
}
</style>
